<template>
  <div class="checi">
    <div class="head">
      <span
        >车次类型:
        <select v-model="Selectvalue" @change="OnchangCheci">
          <option value="">全部</option>
          <option>高速动车</option>
          <option>动车组</option>
          <option>城际高速</option>
          <option>直达特快</option>
          <option>空调特快</option>
          <option>快速</option>
          <option>普快</option>
        </select>
      </span>
      <span
        >状态：
        <select v-model="Selectfalg" @change="OnchangSelectfalg">
          <option value="">全部</option>
          <option>启用</option>
          <option>停用</option>
        </select>
      </span>
      <span>
        <input
          placeholder="搜索ID/车次/车长"
          class="ipt"
          v-model="SearchCheci"
          @change="OnSearchsousuo"
        />
      </span>
      <span>
        <el-button type="primary" @click="$router.push(`/addTrain`)"
          >新建车次</el-button
        >
      </span>
      <span>
        <el-button type="primary" @click="Btnseaich()">搜索</el-button>
      </span>
    </div>
    <main>
      <el-table :data="list" border style="width: 100%">
        <el-table-column fixed prop="id" label="ID" width="150">
        </el-table-column>
        <el-table-column prop="ci" label="车次" width="120"> </el-table-column>
        <el-table-column prop="lei" label="车次类型" width="120">
        </el-table-column>
        <el-table-column prop="name" label="车长" width="120">
        </el-table-column>
        <el-table-column prop="chenum" label="车厢总数" width="120">
        </el-table-column>
        <el-table-column prop="weishu" label="总座位数" width="120">
        </el-table-column>
        <el-table-column prop="renshu" label="限乘人数" width="120">
        </el-table-column>
        <el-table-column prop="time" label="创建时间" width="300">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-button type="text" size="small" @click="BtnSc(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </main>
    <!-- 编辑 -->
    <el-dialog
      class="bianji"
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <p><input v-model="xiugaicheci" />修改车次</p>
      <p><input v-model="xiugailx" />车次类型</p>
      <p><input v-model="xiugaicz" />车长</p>
      <p><input v-model="xiugaizs" />车厢总数</p>
      <p><input v-model="xiugaizzws" />总座位数</p>
      <p><input v-model="xiugairs" />限乘人数</p>
      <p><input v-model="xiugaisj" />创建时间</p>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="BtnBjqueren()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      Selectfalg: "", //状态
      xiugaicheci: "", //修改车次
      xiugailx: "", //修改车次类型
      xiugaicz: "", //修改车长
      xiugaizs: "", //修改车厢总数
      xiugaizzws: "", //修改总座位数
      xiugairs: "", //修改限乘人数
      xiugaisj: "", //修改创建时间
      xiugaiid: "",
      dialogVisible: false, //编辑
      Searchid: "", //搜索的id
      SearchCheci: "", //车次
      Selectvalue: "",
      value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      list: [],
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
  methods: {
    //状态
    OnchangSelectfalg() {},
    OnSearchsousuo(value) {
      console.log(value, "value");
    },
    //搜索
    async Btnseaich() {
      const res = await axios.post("/api/list/search", {
        Selectvalue: this.Selectvalue, //状态
        SearchCheci: this.SearchCheci, //车次
        Selectfalg: this.Selectfalg, //状态
      });
      this.list = res.data.data;
    },
    OnchangCheci() {
      console.log(this.Selectvalue, "Selectvalue");
    },
    async Getlist() {
      const res = await axios.post("/api/checi");
      this.list = res.data.data;
    },

    //删除
    async BtnSc(row) {
      const res = await axios.post("/api/checi/detele", { id: row.id });
      this.list = res.data.data;
      this.$message({
        message: "删除成功",
        type: "success",
      });
    },
    //编辑的X
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    //编辑
    handleClick(row) {
      console.log(row, "row");
      this.dialogVisible = true;
      this.xiugaicheci = row.ci; //车次
      this.xiugaicz = row.name; //车长
      this.xiugaizs = row.chenum; //车厢总数
      this.xiugaizzws = row.weishu; //总座位数
      this.xiugairs = row.renshu; //总人数
      this.xiugaisj = row.time; //时间
      this.xiugailx = row.lei; //类型
      this.xiugaiid = row.id; //id
    },
    //编辑确认框
    async BtnBjqueren() {
      this.dialogVisible = false;
      const res = await axios.post("/api/list/bj", {
        xiugaicheci: this.xiugaicheci, //车次
        xiugaicz: this.xiugaicz, //车长
        xiugaizs: this.xiugaizs, //总数
        xiugaizzws: this.xiugaizzws, //总座位数
        xiugairs: this.xiugairs, //总人数
        xiugaisj: this.xiugaisj, //时间
        xiugailx: this.xiugailx, //类型
        xiugaiid: this.xiugaiid, //id
      });
      this.list = res.data.data;
    },
  },
  created() {
    this.Getlist();
  },
};
</script>

<style lang="scss" scoped>
.bianji {
  input {
    margin-right: 20px;
    margin-top: 10px;
  }
}
.checi {
  width: 100%;
  height: 100%;
  select {
    height: 25px;
    border-radius: 10px;
    border: 1px solid #ccc;
  }
  input {
    height: 25px;
    border-radius: 10px;
    border: 1px solid #ccc;
  }
  span {
    margin-bottom: 10px;
  }
  .head {
    width: 100%;
    height: 100px;
    align-items: center;
    display: flex;
    justify-content: space-between;
  }
  main {
    width: 100%;
    height: 100%;
    margin-top: 20px;
  }
  .ipt {
    width: 200px;
    height: 30px;
    border-radius: 5px;
  }
}
</style>